<template>
	<view>
		<view class="list-wrap">
			<u-cell-group title-bg-color="rgb(243, 244, 246)">
				<u-cell-item :titleStyle="{fontWeight: 500}" @click="openPage()" title="选择地址(默认)">
					<image slot="icon" class="u-cell-icon" src="https://cdn.uviewui.com/uview/example/address.png" mode="widthFix"></image>
					
				</u-cell-item>
			</u-cell-group>
			<image style="width:100%;height:6rpx;margin-top: 0;" src="../../static/条.png">
				
			</image>
		</view>
		<view class="u-card-wrap">
			<u-card :title="title" :padding="padding" :border="border">
				<view class="" slot="body">
					<view v-for="(item,index) in tabbar0" :key="index"  class="u-body-item u-flex u-border-bottom justify-around u-p-t-0">						
						<view class="left u-body-item u-flex u-col-between ">
							<view class="left">
								<image :src="item.icon" mode="aspectFill"></image>
							</view>
							<view class="right">
								<view class="u-body-item-title u-line-4 margin-left">
									{{item.name}}
								</view>
							</view>
						</view>
						<view class="right u-body-item u-flex u-col-between ">
							<view class="left">
								<view class="u-body-item-title u-line-4 margin-left">
									{{item.price}}
								</view>
							</view>
							<view class="right">
								<u-icon class="margin-right" name="minus-circle-fill" :size="35" color="red" @click="delFood(index)"></u-icon>
							</view>
						</view>
					</view>
					<view class="u-body-item u-flex u-border-bottom u-p-t-0 flex justify-center" @click="addFoods">						
						<view class="u-body-item-title u-row-2" >
							添加物品
							
								
						</view>	
						<u-icon name="plus-circle-fill" :size="35" color="red"></u-icon>
							
					</view>
				</view>				
			</u-card>
		</view>
		<form>
			
			<view class="cu-form-group">
				<view class="title">预约时间</view>
				<picker @change="PickerChange" :value="index" :range="picker">
					<view class="picker">
						{{index>-1?picker[index]:'请选择时间'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group align-start">
				<view class="title">详情</view>
				<textarea maxlength="255" :disabled="modalName!=null" @input="textareaAInput" placeholder="请填写详情信息"></textarea>
			</view>
			<view class="cu-form-group align-start margin-top">
				<view class="title">备注</view>
				<textarea maxlength="255" :disabled="modalName!=null" @input="textareaBInput" placeholder="请填写备注"></textarea>
			</view>
		</form>
		<view class="box margin-top">
			<view class="cu-bar btn-group">
				<button class="cu-btn bg-green shadow-blur round lg" @click="userReserve">提交</button>
			</view>
		</view>
		
		<u-popup border-radius="10" v-model="show4" class="wrap"
			@close="close" @open="open" mode="bottom" 
			length="80%" :mask="mask"
			:closeable="closeable"
			:close-icon-pos="closeIconPos"
		>
			<!--<u-toast ref="uToast"></u-toast>
			<u-tabs v-if="control" bg-color="#fafafa" :bold="bold"  activeColor="#f29100" :list="list" 
			@change="change" :current="current1" :is-scroll="isScroll"></u-tabs>-->
			<view class="u-tabs-box">
				<u-tabs-swiper  ref="tabs" bg-color="#fafafa" :bold="bold" :list="list" active-color="#f29100" :current="current1" @change="change" :is-scroll="isScroll" swiperWidth="750"></u-tabs-swiper>
			</view>	
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="page-box">
							<view class="order" >
								<view class="top">
									<view class="left">
										<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
										<view class="store">{{ tabbar.name }}</view>
										<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
									</view>
									<view class="right">{{ tabbar.dec }}</view>
								</view>
								<view class="" v-for="(item1, index1) in tabbar.foods" :key="index1" @click="addFood(tabbar.key,item1.index)">
									<view class="item top">
										<view class="left">
											<view class="left">
											<image :src="item1.icon" mode="aspectFill"></image>
											</view>
											<view class="content">
												<view class="title u-line-2">{{ item1.name }}</view>
												<view class="type">{{ item1.name }}</view>
												<view class="delivery-time">{{ item1.dec }}</view>
											</view>
										</view>
										<view class="right">
											<view class="price">
												￥{{ item1.price }}
												
											</view>
											
										</view>
									</view>
									<view class="bottom flex justify-between">
										<view></view>
										<view>
											<view class="evaluate btn margin-right-lg">加入物品</view>
										</view>
									</view>
								</view>
								<!--<view class="total">
									共{{ item1.price }}件商品 合计:
									<text class="total-price">
										￥{{ item1.price}}
										<text class="decimal">{{ item1.price}}</text>
									</text>
								</view>-->
								
							</view>
							
						</view>
						
					</scroll-view>	
				
		</u-popup>
	</view>
	
</template>

<script>
	import foodsData from '@/common/foods_data.js';
	export default {
		data() {
			return {
				id:'',
				index: -1,
				picker: ['9-11点', '11-13点', '13-15点', '15-17点'],
				username: '',
				location: '',
				telephone: '',
				reserve_time: '',
				detail: '',
				remark: '',
				title: '已选择的物品',
				padding: 20,
				bottomSlot: true,
				border: true,
				show4: false,
				padding: 20,
				bottomSlot: true,
				border: true,
				closeable: true,
				mask: true, // 是否显示遮罩
				closeIconPos: 'top-right',
				foodsList:foodsData,
				itemList:[[], [], []],
				loadStatus: ['loadmore','loadmore','loadmore'],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				list: [],
				items:[],
				data: [
					{
						name: '3C数码'
					},
					{
						name: '大宗废品'
					},
					{
						name: '家用电器'
					}
				],
				tabbar: foodsData[0],
				tabbar1: foodsData[0],
				tabbar2: foodsData[1],
				tabbar3: foodsData[2],
				tabbar0: [],
				current1: 0,
				control: true,
				bold: true,
			}
		},
		onLoad() {
			this.list = this.data;
	        //this.getOrderList(0);
	        //this.getOrderList(1);
	        //this.getOrderList(2);
		},
		computed: {
			userInfo(){
				return this.$store.getters.doneUserInfo;
			}
		},
		methods: {
			
			change(index) {
				this.current1 = index;
				
				if (this.current1 ==0){
					this.tabbar = this.tabbar1;
					
				}
				else if(this.current1 ==1){
					this.tabbar = this.tabbar2;
					
				}
				else{
					this.tabbar = this.tabbar3;
					
				}
				
			},
			
			openPage(){
				uni.navigateTo({
					url: '../address/index',
					animationType: 'slide-in-right',
					//animationDuration: '200'
				})
			},
			PickerChange(e) {
				this.index = e.detail.value
				this.reserve_time = this.picker[this.index]
			},
			textareaAInput(e) {
				this.detail = e.detail.value
			},
			textareaBInput(e) {
				this.remark = e.detail.value
			},
			open() {
				// console.log('open');
			},
			close() {
				// console.log('close');
				this.show4=false
			},
			delFood(index){
				console.info(index)
				this.items.splice(index,1)
				this.tabbar0.splice(index,1)
			},
			addFood(cat,index){
				//console.info(cat+' '+index)
				this.tabbar0.push(this.foodsList[cat].foods[index])
				//console.info(this.foodsList[cat].foods[index].name)
				let item={"cat":cat,"index":index}
				this.items.push(item)
			},
			addFoods(){
				this.show4=true
			},
			userReserve(){
				
				this.$H.post('/order/orders/user-reserve',{
					user_id:this.$store.state.userInfo.id,
					reserve_time:this.reserve_time,
					detail:this.detail,
					remark:this.remark,					
					user_location:this.$store.state.location
					
				}).then(res=>{
					let [err,result] = res;
					if(result.data.code == '401'){
						uni.showModal({
							title:'错误提示',
							content:result.data.message,
							showCancel:false
						})
						return;
					}
					if(result.data.code == '200'){
						this.id=result.data.data.id
						for(let i=0;i<this.items.length;i++){
							this.$H.post('/order/orderdetail/save-orderdetail',{
								order_id:this.id,
								user_id:this.$store.state.userInfo.id,
								reserve_time:this.reserve_time,				
								user_location:this.$store.state.location,
								cat:this.items[i].cat,
								key:this.items[i].index
							}).then(res=>{
								let [err,result] = res;
								
								
							})
						}
						//this.$store.commit('alterUserInfo',result.data.data);
						uni.showModal({
							title:'成功',
							content:'操作成功',
							showCancel:false,
						})
					}
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}
</style>
<style scoped lang="scss">
	.u-card-wrap { 
		background-color: $u-bg-color;
		padding: 0;
	}
	
	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}
	
	.wrap {
		padding: 24rpx;
	}
		
	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}
</style>
<style lang="scss" scoped>
	.u-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
	}

	.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.u-search-inner {
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
	}

	.u-search-text {
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}

	.u-tab-view {
		width: 200rpx;
		height: 100%;
	}

	.u-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}

	.u-tab-item-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}

	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid $u-type-primary;
		height: 32rpx;
		left: 0;
		top: 39rpx;
	}

	.u-tab-view {
		height: 100%;
	}

	.right-box {
		background-color: rgb(250, 250, 250);
	}

	.page-view {
		padding: 16rpx;
	}

	.class-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
	}

	.class-item:last-child {
		min-height: 100vh;
	}

	.item-title {
		font-size: 26rpx;
		color: $u-main-color;
		font-weight: bold;
	}

	.item-menu-name {
		font-weight: normal;
		font-size: 24rpx;
		color: $u-main-color;
	}

	.item-container {
		display: flex;
		flex-wrap: wrap;
	}

	.thumb-box {
		width: 33.333333%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}

	.item-menu-image {
		width: 120rpx;
		height: 120rpx;
	}
</style>
<style lang="scss" scoped>
.order {
	width: 710rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			.store {
				margin: 0 10rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.right {
			color: $u-type-warning-dark;
		}
	}
	.item {
		display: flex;
		margin: 20rpx 0 0;
		.left {
			margin-right: 20rpx;
			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
		}
		.content {
			.title {
				font-size: 28rpx;
				line-height: 50rpx;
			}
			.type {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
			}
			.delivery-time {
				color: #e5d001;
				font-size: 24rpx;
			}
		}
		.right {
			margin-left: 10rpx;
			padding-top: 20rpx;
			text-align: right;
			.decimal {
				font-size: 24rpx;
				margin-top: 4rpx;
			}
			.number {
				color: $u-tips-color;
				font-size: 24rpx;
			}
		}
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		.total-price {
			font-size: 32rpx;
		}
	}
	.bottom {
		display: flex;
		margin-top: 40rpx;
		padding: 0 10rpx;
		justify-content: space-between;
		align-items: center;
		.btn {
			line-height: 52rpx;
			width: 160rpx;
			border-radius: 26rpx;
			border: 2rpx solid $u-border-color;
			font-size: 26rpx;
			text-align: center;
			color: $u-type-info-dark;
		}
		.evaluate {
			color: $u-type-warning-dark;
			border-color: $u-type-warning-dark;
		}
	}
}
.centre {
	text-align: center;
	margin: 200rpx auto;
	font-size: 32rpx;
	image {
		width: 164rpx;
		height: 164rpx;
		border-radius: 50%;
		margin-bottom: 20rpx;
	}
	.tips {
		font-size: 24rpx;
		color: #999999;
		margin-top: 20rpx;
	}
	.btn {
		margin: 80rpx auto;
		width: 200rpx;
		border-radius: 32rpx;
		line-height: 64rpx;
		color: #ffffff;
		font-size: 26rpx;
		background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
	}
}
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
}
</style>